<template>
  <div>
    <div class="title">
      <div>
        叩丁狼商品管理系统

        <i class="el-icon-menu" @click="isCollapse = !isCollapse"></i>
      </div>
      <el-dropdown @command="loginout">
        <span class="el-dropdown-link">
          admin<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item  command='lout'>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>

    <div class="inbox">
      <div class="tabbar">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="false"
          :collapse="isCollapse"
          router
        >
          <el-submenu
            :index="index + ''"
            v-for="(mune, index) in mune"
            :key="index"
          >
            <!-- index+'空字符串'转为字符串   -->
            <template slot="title">
              <i :class="mune.icon"></i>
              <span>{{ mune.title }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                :index="subs.index"
                v-for="(subs, index) in mune.subs"
                :key="index"
                >{{ subs.title }}</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <div class="content">
        <router-view class="viebox"></router-view>
        <!-- <el-input
          v-model="tableDataName"
          placeholder="商品名称"
          style="width: 240px"
        ></el-input>
        <el-button type="primary" @click="doFilter">查询</el-button>
        <el-button type="primary" @click="openData">添加</el-button>
        <el-button type="primary" @click="tableDataName = ''">重置</el-button>
        <el-table :data="tableData" style="width: 100%" border max-height="700">
          <el-table-column fixed prop="date" label="日期" width="150">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="province" label="省份" width="120">
          </el-table-column>
          <el-table-column prop="city" label="市区" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" width="300">
          </el-table-column>
          <el-table-column prop="zip" label="邮编" width="120">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableDataName: "",
      //搜索框内容
      currentPage4: 1,
      //分页器当前页
      tableData: [],
      //表格数据
      isCollapse: true,
      // 是否水平折叠收起菜单,false为不折叠
      mune: [
        {
          icon: "el-icon-s-tools",
          title: "商品管理",
          subs: [
            {
              index: "/good",
              title: "商品列表",
            },
            {
              index: "/category",
              title: "商品分类",
            },
            {
              index: "/brand",
              title: "品牌管理",
            },
            {
              index: "/attribute",
              title: "商品属性管理",
            },
          ],
        },
        {
          icon: "el-icon-s-management",
          title: "订单中心",
          subs: [
            {
              index: "/order",
              title: "订单列表",
            },
          ],
        },
        {
          icon: "el-icon-service",
          title: "店铺运营",
          subs: [
            {
              index: "/topic",
              title: "专题管理",
            },
            {
              index: "/statdata",
              title: "运营数据",
            },
          ],
        },
        {
          icon: "el-icon-s-custom",
          title: "会员管理",
          subs: [
            {
              index: "/user",
              title: "会员列表",
            },
          ],
        },
      ],
      //目录数据
    };
  },
  created() {
    // let a = this.$store.state.por
    // 接收用户权限---可访问的页面数量
    let a=this.$store.state.por.reduce((prev,current)=>{
        let key= current.path;// 可访问路径
        let val= current; //数据本身
        prev[key]=val 
        //先在把path提取 以键值对的对象存起 简化判断
        return prev
    },{})

    let newdata = []; // 替换登录菜单

    this.mune.filter((val) => {
      let muneObj = val; // 一级菜单对象
      let newsub = [];
      muneObj.subs.filter((val, index, seft) => {
        let subsMenuObj = val; //二级菜单对象
        // a.map((val) => {
        //   //筛选结果
        //   if (val.path == subsMenuObj.index) {
        //     newsub.push(subsMenuObj);
        //   }
        // });
         if(a[subsMenuObj.index]){ // 判断用户权限 有这个路径的对象--键对--ture 没有的是undefined , 简化循环判断的次数--到达优化性能(代码)的目标.
           newsub.push(subsMenuObj);
         }


      });
      console.log(newdata);
      if (newsub.length > 0) {
        newdata.push({
          icon: muneObj.icon,
          title: muneObj.title,
          subs: newsub,
        });
      }
    });

    this.mune = newdata; //替换菜单
  },
  methods: {
    loginout(e){
      console.log(e);
      if(e=='lout'){
        localStorage.clear()
        window.location.reload()
      }
    },
    // pageSize 改变时会触发 	每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // currentPage 改变时会触发	当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 250px;
  min-height: 400px;
}
.inbox {
  /* background-color: pink; */
  display: flex;
  justify-content: flex-start;
  .content {
    padding: 0 8px;
    padding-top: 8px;
    box-sizing: border-box;
    flex: 1;
    overflow:auto;
  }
}

.title {
  display: flex;
  justify-content: space-between;
  align-content: center;
  background-color: #409eff;
  height: 50px;
  line-height: 50px;
  padding: 0 5px;
  box-sizing: border-box;
  color: #fff;
}
.tabbar {
  background-color:  rgb(84, 92, 100);
  .el-menu {
    height: 95vh;
  }
}
.el-dropdown-link {
  cursor: pointer;
  color: #fff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
/* 分页样式 */
.el-pagination {
  float: right;
}
/* 搜索框样式 */
.el-input{
    margin-bottom: 10px;
    margin-right: 10px;
}
</style>